<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		面试题：v-if和v-show的区别,什么时候用，使用场景
		
		7.****v-show：显示与隐藏（会先渲染标签）
	    true 显示：原来的
		false 隐藏：添加css属性  display:none
		
		8.***v-if     相当js  if判断
		  v-else-if
		  v-else
		  
		  v-if 也可以做显示隐藏
		  true 显示：原来的（渲染标签）
		  false 隐藏：不会渲染该标签
		  
		  什么情况？v-if v-show
		  频繁显示与隐藏的时候，适合v-show
		  渲染一次的时候（很少），适合 v-if
		<div id="app">
			<h1 v-show="flag">1111</h1>
			<h1 v-show="num>9?true:false">2222</h1>
			<button @click="toggle">点击切换显示隐藏</button>
			
		    <h2 v-if="true">3333</h2>
			<h2 v-if="false">4444</h2>
			
			<h3 v-if="score>=90">优秀</h3>
			<h3 v-else-if="score>=60">及格</h3>
			<h3 v-else>不及格</h3>
			
		</div>
		
		<script>
			var vm = new Vue({
				el:"#app",
				data:{//专门放数据
				   flag:true,
				   num:10,
				   score:87
				},
				methods:{//专门方法
					toggle(){
						this.flag=!this.flag;
					}
				}
			})
		</script>
	</body>
</html>
